<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嘎嘎网站</title>
    </style>
</head>
<body>
    <!--
        历史
        1989 CERN 发明的
        1.0版本 html 1993 互联网工程工作小组 IETF
        2.0版本 1995.1
        3.x版本 1997.1.14 w3c标准
        4.0版本 1997.12.18 也是遵循w3c标准
        5.0
    -->
    <!--
        相对单位:em（做比较）
        绝对单位:px（永远都是一个像素）
        块级元素h1,h2,h3...h6
        <p></p>段落
        <br/>转行：往下一行
        <hr/>分割线
        <span></span>是用于显示在页面的同一行
        编辑网页的时候不要为了字体的大小粗细去随意滥用标题
        &nbsp;代表一个空格
    -->
    <!--
    <h1>一级标题</h1>
    <span>同</span>
    <span>一</span>
</hr>
    <br/>
    <hr/>
    <span>行</span>
    <h2>六级标题 </h2>
    <div>网站</div>
    <div>网址</div>
    <div>网页</div>
-->

    <!-- src是source 资源路径的意思，alt是图片加载失败的意思，title
    是鼠标悬停在图片时会出现的文字信息-->

    <!--
        <img src="https://img0.baidu.com/it/u=1544613359,1982607059&fm=253&fmt=auto&app=138&f=JPEG?w=660&h=400" 
    alt="哎嘿我心态没炸" 
    title="me的炸鸡" />绝对路径
    <br/><img src="" alt="国王的新图片">-->

    <!-- ./当前目录文件 ../上一层目录文件  类似我们的cd .. cd 文件夹名字-->
    
    <!-- 文本格式化 -->
    这里是正常的文字
    <br>
    <br>
    <b>加粗文字</b>
    <br>
    <br><strong>我也变粗了</strong>
    <br>
    <!-- b:表示格式上的加粗，是一种格式上的风格需求，只是一种物理行为，告诉浏览器该标签内的字体需要加粗
    strong:带有感情色彩，是一种逻辑行为，强调标签内的文本重要性，某些盲人阅读器在识别的时候这个标签会加重读音和语气，
    而且对于seo，strong更容易被用户搜索识别到-->

    <!-- 
        i:表示单纯的意大利斜体字体
        em:带有感情的斜体字体
    -->
    <br>
    <br><i>我歪了</i>
    <br>
    <br>
    <em>我也歪了救命</em>
    <br>
    <br>
    <del>我被嘎嘎删除了</del>
    <br>
    <br>
    <ins>嘎嘎把我加进来</ins>
    <br>
    <br>
    <p>
        我在中间
        <sub>我在下面</sub>
        <sup>我在上面</sup>

    </p>

    <!--显示模式 block :块级元素;
    inline-block:行内块;
    inline:内联
    行内元素:
    -->
    <span style="width: 1000px;background-color: skyblue;">123</span>
    <div style="width: 1000px; background-color: tomato;">123</div>

    <img src="../czh/1.png" alt="俺学会了"> <!--相对路劲-->
    <a href="https://www.bilibili.com">看完不戳一戳看一下惊喜嘛</a> <!--超链接-->

    <a href="#down">嘎嘎掉</a>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <p>嘎嘎占位置,显示滚动条</p>
    <a name="down">嘎嘎落地</a>
</body>
</html>